import React, { Component } from "react";
import { Button, Col, Row } from "antd";
import { RollbackOutlined } from "@ant-design/icons";
import "./ExamInfoAside.less";
import { connect } from "dva";
import { getCookie } from "@/utils/cookie/cookie";
import { getScoreInfoByStuIdAndExamId } from '@/services/exam'

const mapDispatchToProps = (dispatch) => {
    return {
        changeExamListTabTeach(examListTab) {
            dispatch({
                type: `teacher/changeState`,
                result: { data: examListTab },
                field: "examListTab",
            });
        },
        changeExamListTabStu(examListTab) {
            dispatch({
                type: `student/changeState`,
                result: { data: examListTab },
                field: "examListTab",
            });
        },
    };
};

const statusMap = {
    "normal": "正常交卷",
    "overtime": "超时交卷"
}

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            canEdit: false,
            scoreInfo: {}
        };
    }

    componentDidMount() {
        if (this.props.info) {
            (async () => {
                const { key } = this.props.info
                const stu_id = (() => {
                    if (this.props.type2 === "teacherCheckStudent") {
                        return this.props.info?.stu_id
                    }
                    return getCookie("userId")
                })();
                const result = await getScoreInfoByStuIdAndExamId({ stu_id, exam_id: key })
                if (result.status === 0) {

                    this.setState({
                        scoreInfo: result.data
                    })
                }
            })()
        }
    }

    render() {
        if (this.props.info) {
            const { endTime, maxScore, passScore, startTime, title } = this.props.info
            return (
                <div className="exam-info-aside">
                    <div className="left-aside">
                        <Button
                            type="primary"
                            style={{ width: "100%" }}
                            onClick={() => {
                                this.props.onBack?.()
                            }}
                        >
                            <RollbackOutlined />
                        返回
                    </Button>
                        <h3 className="title">{title}</h3>
                        <Row className="row">
                            <Col span={7}>参与班级：</Col>
                            <Col span={17}>{this.props.info?.class?.join("、")}</Col>
                        </Row>
                        <Row className="row">
                            <Col span={7}>开始时间：</Col>
                            <Col span={17}>{startTime}</Col>
                        </Row>
                        <Row className="row">
                            <Col span={7}>结束时间：</Col>
                            <Col span={17}>{endTime}</Col>
                        </Row>
                        <Row className="row">
                            <Col span={4}>满分：</Col>
                            <Col span={8}>{maxScore}</Col>
                            <Col span={4}>及格：</Col>
                            <Col span={8}>{passScore}</Col>
                        </Row>
                        <Row>
                            <Col>考生信息</Col>
                        </Row>
                        <Row className="row">
                            <Col span={7}>姓名：</Col>
                            <Col span={17}>{(() => {
                                if (this.props.type2 === "teacherCheckStudent") {
                                    return this.props.info?.stu_name
                                }
                                return getCookie("userName")
                            })()}</Col>
                        </Row>
                        <Row className="row">
                            <Col span={7}>学号：</Col>
                            <Col span={17}>{(() => {
                                if (this.props.type2 === "teacherCheckStudent") {
                                    return this.props.info?.stu_id
                                }
                                return getCookie("userId")
                            })()}</Col>
                        </Row>
                        <Row className="row">
                            <Col span={7}>得分：</Col>
                            <Col span={17}>{this.state.scoreInfo.score}</Col>
                        </Row>
                        <Row className="row">
                            <Col span={7}>状态：</Col>
                            <Col span={17}>{statusMap[this.state.scoreInfo.status] || this.state.scoreInfo.status || "未交卷"}</Col>
                        </Row>
                    </div>
                    <div className="content">{this.props.children}</div>
                </div>
            );
        } else {
            if (getCookie("identity") === "student") {
                this.props.changeExamListTabStu()
            } else {
                this.props.changeExamListTabTeach()
            }
            return ""
        }
    }
}

export default connect(null, mapDispatchToProps)(Index);
